<template>
    <div id="map"></div>

</template>

<script>
export default {
  data () {
    return {
      map: {},
      T: ''
    }
  },
  mounted () {
    this.load()
    this.getlab()
  },
  methods: {
    load () {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          console.log('地图初始化成功')
          resolve(window.T)
        }
      })
      init.then(T => {
        this.T = T
        this.map = new T.Map('map')
        this.map.centerAndZoom(new T.LngLat(120.51998990423039, 30.187090511110302), 16)
        const points = []
        points.push(new T.LngLat(120.5159587573058, 30.189271698799864))
        points.push(new T.LngLat(120.51570082708564, 30.188428145072393))
        points.push(new T.LngLat(120.51602111986398, 30.188314127001817))
        points.push(new T.LngLat(120.51569203014614, 30.187232841685518))
        points.push(new T.LngLat(120.52101203032011, 30.186358871282124))
        points.push(new T.LngLat(120.52178573043531, 30.189433470909407))
        points.push(new T.LngLat(120.51813833607245, 30.19010533055126))
        points.push(new T.LngLat(120.51651028777091, 30.1900164744359))
        points.push(new T.LngLat(120.51639463997586, 30.189878234181627))
        points.push(new T.LngLat(120.51625235188894, 30.189280198635245))
        points.push(new T.LngLat(120.5159587573058, 30.189271698799864))
        // 创建面对象
        const polygon = new T.Polygon(points, {
          color: 'blue', weight: 3, opacity: 0.5, fillColor: '#FFFFFF', fillOpacity: 0.5, test: '梅林水稻农场地块一'
        })
        const points2 = []
        points2.push(new T.LngLat(120.51284055789206, 30.182764423462757))
        points2.push(new T.LngLat(120.51364070621113, 30.182621646989077))
        points2.push(new T.LngLat(120.5136126436411, 30.182488571966434))
        points2.push(new T.LngLat(120.51411799719153, 30.18238726270192))
        points2.push(new T.LngLat(120.51380233098138, 30.18022229623628))
        points2.push(new T.LngLat(120.51319871460892, 30.180299152079485))
        points2.push(new T.LngLat(120.51312854147875, 30.180105518149357))
        points2.push(new T.LngLat(120.51225118277188, 30.180217837515734))
        points2.push(new T.LngLat(120.51284055789206, 30.182764423462757))
        // 创建面对象
        const polygon2 = new T.Polygon(points2, {
          color: 'blue', weight: 3, opacity: 0.5, fillColor: '#FFFFFF', fillOpacity: 0.5, test: '测试'
        })
        // 向地图上添加面
        this.map.addOverLay(polygon)
        this.map.addOverLay(polygon2)

        const ctrl = new T.Control.MapType([
          {
            title: '地图',
            icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', // 地图控件上所要显示的图层图标（默认图标大小80x80）
            layer: window.TMAP_NORMAL_MAP
          },
          {
            title: '卫星',
            icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
            layer: window.TMAP_SATELLITE_MAP
          }])

        this.map.addControl(ctrl)
        polygon.addEventListener('click', this.getinfo)
      })
    },
    getinfo (e) {
      const T = this.T
      const that = this
      const p = e.target
      const lnglat = new T.LngLat(p.getCenter().lng, p.getCenter().lat)// 获取点击多边形中心经纬度
      const infoWin = new T.InfoWindow() // 创建信息窗口对象
      const Content = e.target.options.test // 设置信息窗口要显示的内容，此处可使用html代码;现在显示的就是之前在polygon实例中添加的数据
      infoWin.setContent(Content)// 信息窗口加入信息
      infoWin.setOffset(new T.Point(0, -30))// 设置信息窗口边距，第一个决定X方向，第二个决定Y方向
      infoWin.setLngLat(lnglat)// 设置信息窗口位置
      that.map.addOverLay(infoWin)// 向地图上添加信息窗口
    }

  }
}
</script>
<style scoped>
#map {
    width: 85vw;
    height: 85vh;
}
</style>
